<template>
    <ContentFileld>
        <table class="table table-striped">
            <thead>
            <tr>
                <th scope="col">排名</th>
                <th scope="col">用户名</th>
                <th scope="col">天梯分</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(user,index) in users" :key="user.id">
                <td>
                    {{(current_page-1)*10+index+1}}
                </td>
                <td>
                    <img :src="user.photo" alt="" class="user-photo">
                    &nbsp;
                    <span class="username">{{ user.username }}</span>
                </td>
                <td>{{ user.rating }}</td>
            </tr>

            </tbody>
        </table>



        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center">
                <li class="page-item">
                    <a class="page-link" @click="click_page(-2)" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li :class="'page-item ' + page.is_active" v-for="page in pages" :key="page.number"
                    @click="click_page(page.number)">
                    <a class="page-link" href="#">{{ page.number }}</a>
                </li>

                <li class="page-item">
                    <a class="page-link" @click="click_page(-1)" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </ContentFileld>
</template>

<script>
import ContentFileld from "@/components/ContentFileld.vue";
import $ from "jquery";
import { useStore } from "vuex";
import { ref } from "vue";

export default {
    name: "rankListIndex",
    components: {
        ContentFileld,
    },

    setup() {
        const store = useStore();
        let users = ref([]);
        let current_page = ref(1);  // 使用 ref 使其响应式
        let total_users = 1;
        let pages = ref([]);

        const get_user_page = (page) => {
            current_page.value = page;  // 使用 ref 来设置值
            $.ajax({
                url: "http://localhost:3000/ranklist/user",
                type: "get",
                data: {
                    page,
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(resp) {
                    users.value = resp.users;
                    total_users = resp.count;
                    update_pages();
                },
                error(resp) {
                    console.log(resp);
                }
            });
        };

        get_user_page(current_page.value);  // 使用 current_page.value

        const update_pages = () => {
            let max_pages = parseInt(Math.ceil(total_users / 10));
            let new_pages = [];
            let start_page = Math.max(current_page.value - 2, 1);
            let end_page = Math.min(current_page.value + 2, max_pages);

            if (end_page - start_page < 4) {
                if (start_page === 1) {
                    end_page = Math.min(5, max_pages);
                } else if (end_page === max_pages) {
                    start_page = Math.max(1, max_pages - 4);
                }
            }

            for (let i = start_page; i <= end_page; i++) {
                new_pages.push({
                    number: i,
                    is_active: i === current_page.value ? "active" : "",
                });
            }

            pages.value = new_pages;
        };

        const click_page = (page) => {
            if (page === -2) page = current_page.value - 1;
            else if (page === -1) page = current_page.value + 1;
            let max_pages = parseInt(Math.ceil(total_users / 10));

            if (page >= 1 && page <= max_pages) {
                get_user_page(page);
                console.log(current_page.value);  // 使用 current_page.value
            }
        };

        return {
            users,
            click_page,
            pages,
            current_page,  // 传递 current_page.value
        };
    }
};

</script>

<style></style>
